The Photoshop Guru's Handbook - "Creating the NUI" Part 3 - 2D & 3D (inDepth Interface project) Texture Mapping - adding/covering the interface with a texture pattern. ![]() Nothing jazzes up an interface like a good texure pattern or 'skin'. Not all interfaces need or should have them, but when it's applicable or desirable, this is the way to give your interface a very 'personal' look and feel. And i stress 'personal' here because i'm hoping you'll try and be original in your designs, and not just go copying something else you've seen out on the Web. Some interfaces might call for a very specific type of texture, and others will be more open to your own tastes. Either way, there are more than a few ways to apply a texture to an interface, but we'll be covering the most common of those here. GURU NOTE: If you're so new that you're unfamiliar with how to Define and Fill using texture patterns, then for more information on how to use and apply texture patterns with Photoshop, please read 'Session 2' from 'The Guru's Studio' section of this site. You will find the main link to it on my front page within Chapter 3.Which Texture? Ok well, here is a very subjective topic. Unless your design or project calls for a specific look for your interface, you pretty much have the run-of-the-show with this part of your design. About the only thing i can personally suggest is that whatever kind of texture you use, it should be of the best possible image quality that you can find. If you need the end result to look more 'less than perfect', then you can always make it that way after you've applied it to the interface. Otherwise, you'll have no place to go but down if you decide to start altering/tweaking the texture later on. If you aren't really sure of what type of texture to use, then simply open a number of them and experiment with each type. Eventually you'll see something you like, or something that will spark your imagination. Getting the texture into your interface document: Obviously we need to start off by creating a New layer. But this layer can not just go anywhere in the order of layers you already have. It has to go into a 'specific' place in the layers palette so that the texture will effect 'some' parts of the interface, and not others. Otherwise you'll end up with textured button lights, and the screen glass will be texturized as well. Keep in mind though that you can choose to put the texture at the top-most level of your layers, and have it cover every part of the interface; buttons and all. If that's the 'look' you're going for, then by all means go for it. That's something that is left up to each individual to decide for themselves. Remember, it never hurts to at least try stuff. :?) Also keep in mind that the 'order' in which we're applying our texture for this specific interface example is only one method of doing this. We could have very easily done this step way back just after we created the main body parts of our interface. I choose to do it at this stage because i prefer to wait until my interface is almost completed before texture mapping it, or giving it a 'skin' of some kind. That way i'll have a better idea of how the texture effects the look of the overall interface, because all or most of my parts have already been added. Unless you know exactly what you're looking for ahead of time, it's not as easy choosing an appropriate texture when the only thing you have to see it applied to is the main body section. But everyone will develope their own ways of doing this part, mine is just one way; my way. Ok so for this specific design, we need our texture to effect only the main body section of the interface; not the button, and not the view screen. In order for that to happen, we'll need to create a New layer that is below these parts. That means putting it right above the 'Inset' layers. You should have 3 'Inset' layers in total; inset-lines, inset-mold light, and inset-mold dark. So create a New layer just above these ones, and name it 'Texture-1'. - Now, just so you can see how we'll apply a texture to the interface, open up any texture pattern you have or like, in to Photoshop. Once you have your texture opened, go through the normal 'Define Pattern'-'Fill Pattern' steps to load your texture into Photoshop's memory, and in to your texture layer. Defining a Pattern: (loading a texture) Open your texture pattern; Select All (ctrl+a); go to Edit/Define Pattern; return to your interface image; go to Edit/Fill/Pattern, and fill the layer or selection with your texture. Done. Trimming the unneeded areas of the texture:The first texture pattern i tried was a polka-dot pattern. ![]() Yah yah i know, it's an odd choice... but what the heck! I'd rather start a trend, than be a trend. :?)=) The Blend mode i used on my Texture-1 layer for this image was Overlay. Now turn to Page 5b > Buttons / Texture Mapping / Adding Text > To the Top < > Back to "2D & 3D" < - Page 5a - |
"The Photoshop Guru's Handbook" ™ and all contents of this site are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved. |